<template>
  <div>
      <div class="register-container">
        <el-steps :active="active" finish-status="success" style="text-align: left;margin: 0px 40px 0px 40px">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
        </el-steps>
        <div v-if="!isFinish">
          <component :is="steps" ref="steps" Key="steps" @steps="changeStep" @user="getUserInfo" @authCode="getAuthCode"></component>
        </div>
          <el-form>
            <el-form-item>已有账号？
              <el-button type="text" style="color:#1a5b59;font-weight:bold" @click.stop="login">登录</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>

import step2 from './step2'
import step1 from './step1'
import api from '../../apis/login'
import {Message} from 'element-ui'

export default {
  name: 'register',
  data () {
    return {
      isFinish: false,
      active: 0,
      steps: 'step1',
      user: {
        loginName: '',
        password: '',
        email: ''
      },
      responseResult: [],
      authCode: ''
    }
  },
  computed: {
  },
  components: {step1, step2},
  mounted () {
  },
  methods: {
    getUserInfo (user) {
      this.user = user
    },
    getAuthCode (authCode, email) {
      this.authCode = authCode
      this.user.email = email
    },
    keydown (e) {
      // 如果是回车则执行登录方法
      if (e.keyCode === 13) {
        // 需要执行的登录方法
        this.register()
      }
    },
    login () {
      this.$emit('status', 'login')
    },
    changeStep () {
      this.active++
      if (this.steps === 'step1') {
        this.steps = 'step2'
        return
      }
      this.checkCode()
      this.$nextTick(function () {
        console.log(this.authCode, '||', this.user)
      })
    },
    async checkCode () {
      const resultCode = await api.checkCode({
        authCode: this.authCode,
        user: this.user
      })
      if (resultCode.code === 200) {
        Message.success(resultCode.msg)
        this.login()
      } else {
        Message.error(resultCode.msg)
      }
    }
  }
}
</script>

<style scoped>

</style>
